<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>MovieRama</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style type="text/css">
.borderedMovie {
	border: 1px solid #ddd;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px;
	margin-bottom: 15px;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("#form").submit(function (e) {
	        e.preventDefault();
		});

		$("#results").html("");
		$("#loader").show();

		$("#submit").attr("disabled", true);
		
		$.ajax({
			url : "api/MovieRamaService/playing",
			method : "get",
			success : function(data) {
				$("#loader").hide();
				$("#submit").attr("disabled", false);
				if (data.statusCode == "000") {
					var header = "<div class=\"col-sm-8 blog-main\">";
					header = header + "</br></br><div class=\"blog-header\"><p class=\"lead blog-description\" style=\"color: #3F87C5;\">" + data.movies.length + " movies in theaters this week </p></div></div><div class=\"row\">";
					$("#results").append(header);
					for (var i = 0; i < data.movies.length; i++) {
						var movie = "<div class=\"blog-post borderedMovie\">";
						
						var title = (data.movies[i].title == null || data.movies[i].title == 'null') ? "No title found" : data.movies[i].title;
						movie = movie + "<h2 class=\"blog-post-title\">" + title + "</h2></br>";

						var yearOfProduction = (data.movies[i].yearOfProduction == null || data.movies[i].yearOfProduction == 'null' || data.movies[i].yearOfProduction == '0') ? "No year of poduction found" : data.movies[i].yearOfProduction;
						var starringActors = (data.movies[i].starringActors == null || data.movies[i].starringActors == 'null') ? "No starring actors found" : data.movies[i].starringActors;
						movie = movie + "<p class=\"blog-post-meta\">" + yearOfProduction + " - Staring: " + starringActors +  "</p></br>";

						var description = (data.movies[i].description == null || data.movies[i].description == 'null') ? "No description found" : data.movies[i].description;
						movie = movie + "<p>" + description + "</p>";
						movie = movie + "<p style=\"text-align: right; color: #3F87C5;\">" + data.movies[i].numberOfReviews + " Reviews</p>";
						movie = movie + "</div>";
						
						$("#results").append(movie);
					}
					$("#results").append("</div></div>");
				}
			}
		});
		
		$("button[data-toggle]").on('click', function() {
			var $target = $($(this).attr('data-toggle'));
            $target.toggle();
            var $target = $($(this).attr('data-toggle'));
            $target.toggle();
            if (!$target.is(':visible')) {
                // Enable the submit buttons in case additional fields are not valid
                $('#form').data('bootstrapValidator').disableSubmitButtons(false);
            }
        });
            
		$("#submit").click(function() {
			var query = $("#search").val();
			if(query != ""){
				$("#submit").attr("disabled", true);
				$("#results").html("");
				$("#loader").show();
				$.ajax({
					url : "api/MovieRamaService/search?query=" + query,
					method : "get",
					success : function(data) {
						$("#loader").hide();
						if (data.statusCode == "000") {
							var header = "<div class=\"col-sm-8 blog-main\">";
							header = header + "</br></br><div class=\"blog-header\"><p class=\"lead blog-description\" style=\"color: #3F87C5;\">Found " + data.movies.length + " movies for \"" + query + "\" </p></div></div><div class=\"row\">";
							$("#results").append(header);
							for (var i = 0; i < data.movies.length; i++) {
								var movie = "<div class=\"blog-post borderedMovie\">";
								
								var title = (data.movies[i].title == null || data.movies[i].title == 'null') ? "No title found" : data.movies[i].title;
								movie = movie + "<h2 class=\"blog-post-title\">" + title + "</h2></br>";

								var yearOfProduction = (data.movies[i].yearOfProduction == null || data.movies[i].yearOfProduction == 'null' || data.movies[i].yearOfProduction == '0') ? "No year of poduction found" : data.movies[i].yearOfProduction;
								var starringActors = (data.movies[i].starringActors == null || data.movies[i].starringActors == 'null') ? "No starring actors found" : data.movies[i].starringActors;
								movie = movie + "<p class=\"blog-post-meta\">" + yearOfProduction + " - Staring: " + starringActors +  "</p></br>";

								var description = (data.movies[i].description == null || data.movies[i].description == 'null') ? "No description found" : data.movies[i].description;
								movie = movie + "<p>" + description + "</p>";
								movie = movie + "<p style=\"text-align: right; color: #3F87C5;\">" + data.movies[i].numberOfReviews + " Reviews</p>";
								movie = movie + "</div>";
								
								$("#results").append(movie);
							}
							$("#results").append("</div></div>");
							$("#submit").attr("disabled", false);
						}
					}
				});
			}
		});

	});
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3" style="margin-top: 150px;">
				<form class="form-inline" role="form" id="form"  data-toggle="validator">
					<div class="form-group">
						<input type="text" class="form-control input-lg" placeholder="Search" id="search" required />
						<button class="btn btn-primary btn-lg" type="submit" id="submit">Submit</button>
					</div>
					<div>
						<img src="images/ajax-loader.gif" id="loader" style="margin: 25%; display: none;"/>
					</div>
				</form>
			</div>
		</div>
		<div class="row" id="results">
		
		</div>
	</div>
</body>
</html>